<template>
	<view class="conn">
		<navbox title="动态详情"></navbox>
		<view class="con">
			<view class="u-page" style="margin-bottom: 60px;">
				<view class="u-demo-block">
					<view class="u-demo-block__content">
						<view class="album">
							<view class="album__avatar">
								<image :src="fres.picUrl" mode="" style="width: 32px;height: 32px;" @click="getobj(fres.userId)">
								</image>
							</view>
							<view class="album__content">
								<u--text :text="fres.userName" type="primary" bold size="17"></u--text>
								<u--text margin="0 5 38px 0" size="19" :text="fres.freDesc">
								</u--text>
								<u-album :urls="fres.urls" multipleSize="70" singleSize="180"></u-album>
								<view
									style="display: flex;align-items: center;justify-content: space-between;margin-right: 30rpx;margin-top: 50rpx;">
									<view style="color: #adadad;">{{fres.creatTime}}</view>
									<view style="display: flex;align-items: center;justify-content: flex-end;">
										<u-icon size="24" name="heart" @click="dian(fres.id,fres.colorAble)"
											:color="fres.colorAble==='1'?'#ff2f06':''"></u-icon>
										<view style="width: 30rpx;"></view>
										<u-icon size="24" name="chat" @click="ping()"
											v-if="user.frentLink!==5&&user!==''">
										</u-icon>
										<u-button type="default" icon="share-square" size="large" openType="share"
											iconColor="#000000" customStyle="padding: 0 0px;"  class="custom-style">
										</u-button>
									</view>
								</view>

								<view class="head" v-if="show">
									<view class="input">
										<view style="width: 80%;">
											<u-input placeholder="说点什么吧.." border="surround" v-model="value">
											</u-input>
										</view>
										<button @click="insertArticle(fres.id)"
											style="width: 50px;height: 40px;background-color: #4891df;display: flex;align-items: center;justify-content: center;">
											<u-icon name="chat" color="#e3e3e3" size="28"></u-icon>
										</button>
									</view>
								</view>
								<u-divider></u-divider>

							</view>
						</view>
						<view style="background-color: #fafafa;width: 100%;border-radius: 2px;margin-left: 20rpx;">
							<view v-if="fres.goodsCount!==0"
								style="display: flex;align-items: center;justify-content: flex-start;margin-top: -15rpx;">
								<u-icon size="25" name="heart-fill"></u-icon>
								<view style="display: flex;align-items: center;justify-content: start;flex-wrap: wrap;">
									<text v-for="itt in fres.goods" :key="itt">{{itt+','}}</text>
									<text> ,等{{fres.goodsCount}}人觉得很赞</text>
								</view>


							</view>
							<view v-for="(item,index) in fres.articleList" :key="item.id">
								<view
									style="display: flex;align-items: center;justify-content: flex-start;margin-top: 50rpx;">
									<image :src="item.picUrl" style="width: 29px;height: 29px;border-radius: 50px;">
									</image>
									<view style="margin-left: 20rpx;">{{item.userName}}</view>
								</view>
								<view style="margin-top: 0rpx;margin-left: 38rpx;margin-right: 38rpx;">
									{{item.content}}
									<view style="margin-top: 10rpx;">
										<view style="color: #9c9c9c;font-size: 14px;">
											<text>{{item.createTime}}</text>
											<text style="margin-left: 30rpx;" @click="ping2(index)"
												v-if="user.frentLink!==5&&user!==''">回复</text>
										</view>
										<view class="head" v-if="item.type===1">
											<view class="input">
												<view style="width: 80%;">
													<u-input placeholder="说点什么吧.." border="surround" v-model="value">
													</u-input>
												</view>
												<button @click="insertArticle(fres.id,item.id)"
													style="width: 50px;height: 40px;background-color: #4891df;display: flex;align-items: center;justify-content: center;">
													<u-icon name="chat" color="#e3e3e3" size="28"></u-icon>
												</button>
											</view>
										</view>
										<view v-if="item.articleList!==null" v-for="it in item.children" :key="it.id">
											<view
												style="display: flex;align-items: center;justify-content: flex-start;margin-top: 20rpx;">
												<image :src="it.picUrl"
													style="width: 25px;height: 25px;border-radius: 50px;">
												</image>
												<view style="margin-left: 20rpx;">{{it.userName}}</view>
											</view>
											<view style="margin-top: 10rpx;margin-left: 35rpx;margin-right: 35rpx;">
												{{it.content}}
												<view style="margin-top: 10rpx;color: #bfbfbf;font-size: 14px;">
													<text style="color: #9c9c9c;font-size: 14px;">
														{{it.createTime}}</text>
												</view>
											</view>
										</view>
										<u-divider></u-divider>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="ableshow" @close="close" @open="open" mode="center" round="10" zoom="false">
			<view>
				<view style="display: flex;align-items: center;justify-content: flex-start;width: 520rpx;">
					<view style="margin-left: 50rpx;"></view>
					<u-image :src="userObj.picUrl" :lazy-load="true" mode="aspectFit" width="70" height="70"></u-image>
					<view style="margin-left: 32rpx;">
						<u--text type="primary" :text="userObj.nickName"></u--text>
						<view style="display: flex;align-items: center;justify-content: start;margin-top: 20rpx;">
							<u-tag :text="'Id:'+userObj.id" size="mini" type="warning"></u-tag>
						</view>
					</view>
				</view>
			  <view style="margin-left: 34rpx;margin-top: 20rpx;" v-if="userObj.phone">
			  	手机号：{{ userObj.phone}}
			  </view>
			  <view style="margin-left: 34rpx;margin-top: 20rpx;" v-if="userObj.email">
			  	邮箱：{{ userObj.email}}
			  </view>
				<view style="margin-left: 34rpx;margin-top: 20rpx;padding-bottom: 25rpx;">
					简介：{{userObj.userTab===''?'这个人很懒。什么都没写':userObj.userTab}}
				</view>
		
			</view>
		</u-popup>
	</view>

</template>

<script>
	import navbox from '../components/navbox/navbox.vue'
	export default {
		data() {
			return {
				ableshow:false,
				userObj:{},
				user: uni.getStorageSync("user"),
				albumWidth: 0,
				fres: {},
				id: '',
				show: false,
				show2: false,
				value: ''
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.id = option.id
			this.getList()
		},
		methods: {
			async getobj(id) {
				const res = await this.$myRuquest({
					url: '/wexinLogin/getUser?userId='+id,
					method: 'post',
				})
				this.userObj=res.data.data
				this.ableshow=true
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				this.ableshow=false
				// console.log('close');
			},
			async insertArticle(frentsId, parentId) {
				console.log(frentsId, parentId)
				const user = uni.getStorageSync("user")
				const a = {
					preId: frentsId,
					userId: user.id,
					picUrl: user.picUrl,
					userName: user.nickName,
					content: this.value,
					parentId: parentId === null ? '' : parentId
				}
				const res = await this.$myRuquest({
					url: '/wexinLogin/frents/insertArticle',
					method: 'post',
					data: a
				})
				this.getList()
				this.show = false
			},
			ping() {
				this.value = ''
				this.show = !this.show
			},
			ping2(index) {
				this.value = ''
				if (this.fres.articleList[index].type !== 1) {
					this.fres.articleList[index].type = 1
				} else {
					this.fres.articleList[index].type = 0
				}
			},
			async dian(frentsId, colorAble) {
				const user = uni.getStorageSync("user")
				if (colorAble === "1") {
					console.log(user.id)
					const res = await this.$myRuquest({
						url: '/wexinLogin/frents/remGood?id=' + user.id + "&frentsId=" + frentsId,
						method: 'post',
					})
				} else {
					const a = {
						frentsId: frentsId,
						userId: user.id,
						userName: user.nickName,
					}
					const res = await this.$myRuquest({
						url: '/wexinLogin/frents/insertGood',
						method: 'post',
						data: a
					})
				}
				this.getList()
			},
			async getList() {
				const res = await this.$myRuquest({
					url: '/wexinLogin/frents/listbyid?id=' + this.id + '&userId=' + uni.getStorageSync("user")
						.id,
					method: 'post'
				})
				if (res.data.data.code !== 200) {
					return uni.showToast({
						title: "系统错误",
						icon: 'none'
					})
				}
				console.log(res)
				this.fres = res.data.data.data

			}
		},
		components: {
			"navbox": navbox
		},
	}
</script>

<style lang="scss">
	.head {
		margin-top: 30rpx;
		margin-left: -10rpx;
		margin-right: 35rpx;
		border: solid 1px #fff;

		.icon {
			display: flex;
			align-items: center;
			justify-content: space-around;
		}

		.input {
			margin-top: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

	}

	.conn {
		margin-top: 180rpx;

		.con {

			border-radius: 20px;
			margin-left: 30rpx;
			margin-right: 35rpx;

			.pinglun {
				height: 40rpx;
				background-color: #a495ee;
				border-radius: 4px
			}
		}
	}

	.album {
		@include flex;
		align-items: flex-start;

		&__avatar {
			background-color: $u-bg-color;
			padding: 5px;
			border-radius: 3px;
		}

		&__content {
			margin-left: 10px;
			flex: 1;
		}
	}
</style>
